<!-- <h2> {{hero.name}} Details </h2>
<div><span>id:</span> <span> {{hero.id}} </span> </div>
<div><span>name:</span><span> {{hero.name | uppercase}} </span></div> -->
<!-- <div>name:{{hero.name}}</div>
<div>
    <label>name
        <input type="text" [(ngModel)]="hero.name" placeholder="name">
    </label>
</div> -->
<h2>My Heros test</h2>
<ul class="heroes">
    <!-- <li *ngFor="let hero of heroes" (click)="handleHeroClk(hero)" [class.selected]="hero === selectedHero">
        <span class="badge"> {{hero.id}} </span> {{hero.name}}
    </li> -->
    <li *ngFor="let hero of heroes">
        <a routerLink="/detail/{{hero.id}}"></a>
        <span> {{hero.name}}: </span>
        <span class="badge"> {{hero.id}} </span>
    </li>
</ul>
<!-- <app-hero-detail [hero]="selectedHero"></app-hero-detail>   -->